<!--  -->
<template>
  <div class='leftNav_container'>
    <el-menu
      :default-active="$route.name"
      class="el-menu-vertical-demo"
      active-text-color="#587CF3"
      @open="handleOpen"
      @close="handleClose">
      <div v-for="(item, index) in navList"
           :key="index">
        <el-submenu 
          :index="item.priority.toString()"
          v-if="item.childrenMenu">
          <template slot="title" >
            <!-- <i class="nav_icon" :style="{background:`url(/static/img/leftNav/${item.icon}.png) 0 0 no-repeat`}"></i> -->
            <span>{{item.menuName}}</span>
          </template>
          <el-menu-item-group
            v-for="(childItem, childIndex) in item.childrenMenu"
            :key="childIndex"
            v-if="!childItem.childrenMenu"
          >
            <el-menu-item
              :index="childItem.uri"
              @click="toRouter(childItem)"
            >{{childItem.menuName}}</el-menu-item>
          </el-menu-item-group>

          <el-submenu 
            :index="childItem.priority.toString()" 
            v-else
          >
            <template slot="title">{{childItem.menuName}}</template>
            <el-menu-item 
              v-for="(sonItem, sonIndex) in childItem.childrenMenu" 
              :key="sonIndex"
              :index="sonItem.uri"
              @click="toRouter(sonItem)"
            >
              {{sonItem.menuName}}
            </el-menu-item>
          </el-submenu>
          
        </el-submenu>

        <el-menu-item
          v-else
          @click="toRouter(item)"
          :index="item.uri">
          <template >
            <!-- <i class="nav_icon" :style="{background:`url(/static/img/leftNav/${item.icon}.png) 0 0 no-repeat`}"></i> -->
            <span slot="title">{{item.menuName}}</span>
          </template>
        </el-menu-item>

      </div>

    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data() {
    return {
      activeIndex: "4",
      navList: []
    }
  },

  created() {
    
  },

  watch: {
    menuList: {
      handler(newV, oldV) {
        if(newV) {
          this.navList = newV.childrenMenu;
        }else {
          this.navList = [];
        }
      },
      immediate: true,
      deep: true
    }
  },

  computed: {
    menuList() {
      return this.$store.state.menuList.find((e) => { return e.uri == this.$route.meta.primaryMenuName });
    }
  },

  mounted() {
    
  },

  methods: {

    toRouter(item) {
      this.$router.push(item.uri)
    },

    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },

    handleOpen(key, keyPath) {
      this.activeIndex = key;
    },

    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }
  },
  // props: ["navList"]
}
</script>

<style>
.menu_item .el-icon-arrow-down{
  color: #FC8434 !important;
  font-size: 16px;
}

.menu_item .el-icon-arrow-down:before{
  content: "\e791" !important;
}

/*菜单关闭*/
.menu_item.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(0); 
	-ms-transform: rotate(0);
	transform: rotateZ(0); 
}
.menu_item.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(90deg); 
	-ms-transform: rotate(90deg);
	transform: rotateZ(90deg); 
}

.leftNav_container .el-submenu__icon-arrow{
  margin-top: -3px;
  /* transform: translateY(-50%); */
}


/** =====================icon ================ */

.nav_icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background-size: 100% !important;
}




</style>
<style scoped>

.leftNav_container {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.leftNav_container .el-submenu__title span {
  font-size: 14px;
}
.leftNav_container .el-menu-item{
  font-size: 14px;
}
.leftNav_container .el-menu-item span{
  font-size: 14px;
}

</style>

